<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>陌陌酒店</title>
<!-- Stylesheets -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/revolution-slider.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!--Favicon-->
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">

<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="css/responsive.css" rel="stylesheet">
	<script type="text/javascript" src="jquery/jquery-2.1.1.min.js"></script>

	<script type="text/javascript">
		function submitBtn() {
			var datepicker = $("#datepicker").val();    // 获取id为datepicker的<input>框数据
			var datepickerone = $("#datepickerone").val();    // 获取id为datepickerone的<input>框数据
			var customer = $("#customer").val();    // 获取id为customer的下拉框数据
			var cusNum = $("#cusNum").val();    // 获取id为cusNum的下拉框数据
			var phone = $("#phone").val();    // 获取id为phone的下拉框数据
			// 判断
			if (datepicker.length == 0) {
				alert("请选择到达日期");
				return;
			}
			if (datepickerone.length == 0) {
				alert("请选择离开日期");
				return;
			}
			if (datepickerone < datepicker) {
				alert("离开日期必须比入住日期晚");
				return;
			}
			if (customer.length == 0) {
				alert("请选择顾客类型");
				return;
			}
			if (cusNum.length == 0) {
				alert("请选择人数");
				return;
			}
			if (phone.length == 0) {
				alert("请填写联系方式");
				return;
			}
			var data={"datepicker": datepicker, "datepickerone": datepickerone, "customer": customer, "cusNum": cusNum, "phone":phone}
			// Ajax提交数据
			$.ajax({
				url: "/orderRoom",    // 提交到controller的url路径
				type: "post",    // 提交方式
				data: JSON.stringify(data),
				contentType:"application/json;charset=utf-8",
				dataType: "json",    // 服务器端返回的数据类型
				success: function (data) {    // 请求成功后的回调函数，其中的参数data为controller返回的map,也就是说,@ResponseBody将返回的map转化为JSON格式的数据，然后通过data这个参数取JSON数据中的值
					if (data.msg == "success") {
						//跳转到系统首页
						location.href = "pay.html";
						return;
					} else {
						location.href = "rooms-detail.html";
						alert("网络出错！请重新预定房间！")
					}
				},
			});
		}
	</script>

</head>


<body>
<div class="page-wrapper">

	<header class="header" id="header"></header>
	<script type="text/javascript">
		/*引入Header部分公共代码*/
		$(function(){
			$.ajax({
				type:"get",
				url:"header.html",
				async:true,
				success:function(data){
					$("#header").html(data);
				}
			});
		});
	</script>
    <!-- main header area end -->


     <!--Page Title-->
    <section class="page-title text-center">
        <div class="auto-container">
            <div class="content-box">
                <div class="title">客房细节</div>
                <ul class="bread-crumb">
                    <li><a href="index.html">主页<i class="fa fa-angle-right"></i></a></li>
                    <li>客房细节</li>
                </ul>
            </div>
        </div>
    </section>
    <!--End Page Title-->

    <!-- rooms details section -->
    <section class="rooms-details">
    	<div class="container">
    		<div class="row">
    			<div class="col-md-8 col-sm-8 col-xs-12">
    				<div class="rooms-details-content">
    					<div class="img-box">
    						<figure><img src="images/rooms/timg.jpg" alt=""></figure>
    					</div>
    					<div class="lower-content">
    						<h2>海景公寓</h2>
    						<div class="text"><span>$250</span> / Night</div>
    						<ul class="rating">
    							<li><i class="fa fa-star" aria-hidden="true"></i></li>
    							<li><i class="fa fa-star" aria-hidden="true"></i></li>
    							<li><i class="fa fa-star" aria-hidden="true"></i></li>
    							<li><i class="fa fa-star" aria-hidden="true"></i></li>
    							<li><i class="fa fa-star" aria-hidden="true"></i></li>
    						</ul>
    						<p>标题1</p>
    						<p>标题2<br />
						    标题2.1</p>
    					</div>
    					<div class="rooms-catagori">
    						<h3>房间优势</h3>
    						<div class="row">
    							<div class="col-md-4 col-sm-4 col-xs-12">
    								<ul class="list">
    									<li>双人</li>
    									<li>空调</li>
    									<li>室外厨房</li>
    								</ul>
    							</div>
    							<div class="col-md-4 col-sm-4 col-xs-12">
    								<ul class="list">
    									<li>双人</li>
    									<li>空调</li>
    									<li>室外厨房</li>
    								</ul>
    							</div>
    							<div class="col-md-4 col-sm-4 col-xs-12">
    								<ul class="list">
    									<li>双人</li>
    									<li>空调</li>
    									<li>室外厨房</li>
    								</ul>
    							</div>
    						</div>
    					</div>
    					<div class="client-reviews">
    						<h3>客户评论</h3>
    						<div class="text">你的评级
    							<ul class="rating">
    								<li><i class="fa fa-star-o" aria-hidden="true"></i></li>
    								<li><i class="fa fa-star-o" aria-hidden="true"></i></li>
    								<li><i class="fa fa-star-o" aria-hidden="true"></i></li>
    								<li><i class="fa fa-star-o" aria-hidden="true"></i></li>
    							</ul>
    						</div>
    						<div class="default-form">
		                        <form id="contact-form" name="contact_form" class="default-form" action="inc/sendmail.php" method="post">
		                            <div class="row">
		                                <div class="col-md-12 col-sm-12 col-xs-12">
		                                	<textarea placeholder="你的评论" name="form_message" required=""></textarea>
		                                </div>
		                                <div class="col-md-6 col-sm-6 col-xs-12">
		                                    <input type="text" name="form_name" value="" placeholder="你的名字" required="">
		                                </div>
		                                <div class="col-md-6 col-sm-6 col-xs-12">
		                                    <input type="email" name="form_email" value="" placeholder="你的邮箱" required="">
		                                </div>
		                            </div>
		                            <button type="submit" class="btn-one" data-loading-text="Please wait...">提交</button>
		                        </form>
		                    </div>
    					</div>
    				</div>
    			</div>
    			<div class="col-md-4 col-sm-6 col-xs-12">
    				<div class="sidbar-content">
	    				<h3>客房预定</h3>
	                    <div class="date">
	                    	<i class="fa fa-calendar" aria-hidden="true"></i>
	    					<input type="text" name="date" placeholder="抵达日期" id="datepicker">
	                    	<i class="fa fa-calendar" aria-hidden="true"></i>
	                    	<input type="text" name="date" placeholder="离开日期" id="datepickerone">
	                    </div>
	                    <select class="custom-select-box" id="customer">
							<option>&nbsp;顾客</option>
							<option>&nbsp;先生</option>
							<option>&nbsp;女士</option>
	                    </select>
	                    <select class="custom-select-box" id="cusNum">
							<option>&nbsp;人数</option>
							<option>&nbsp;1 人</option>
							<option>&nbsp;2 人</option>
							<option>&nbsp;3 人</option>
							<option>&nbsp;4 人</option>
							<option>&nbsp;4人以上</option>
	                    </select>
						<div>
							<input style="margin-bottom: 10px "type="text" id="phone" name="phone" value="" placeholder="联系方式" required="">
						</div>
						<a href="#" class="btn-one" onclick="submitBtn()">预约</a>
	    			</div>
    			</div>
    		</div>
    	</div>
    </section>
    <!-- rooms details section end -->

	<!--页眉-->
	<div class="footer" id="footer" ></div>
	<script type="text/javascript">
		/*引入Header部分公共代码*/
		$(function(){
			$.ajax({
				type:"get",
				url:"footer.html",
				async:true,
				success:function(data){
					$("#footer").html(data);
				}
			});
		});
	</script>
    
</div>
<!--End pagewrapper-->


<!--Scroll to top-->
<div class="scroll-to-top scroll-to-target" data-target=".main-header"><span class="icon fa fa-angle-up"></span></div>


<!-- jQuery js -->

<script src="js/map-script.js"></script>
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.themepunch.tools.min.js"></script>
<script src="js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="js/revolution.extension.slideanims.min.js"></script>
<script type="text/javascript" src="js/revolution.extension.layeranimation.min.js"></script>
<script type="text/javascript" src="js/revolution.extension.navigation.min.js"></script>
<script type="text/javascript" src="js/revolution.extension.kenburn.min.js"></script>
<script type="text/javascript" src="js/revolution.extension.actions.min.js"></script>
<script type="text/javascript" src="js/revolution.extension.parallax.min.js"></script>
<script type="text/javascript" src="js/revolution.extension.migration.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/jquery.appear.js"></script>
<script type="text/javascript" src="js/jquery.countTo.js"></script>
<script src="js/isotope.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.fancybox-media.js"></script>
<script src="js/owl.js"></script>
<script src="js/masterslider.js"></script>
<script type="text/javascript" src="js/jquery.polyglot.language.switcher.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
<script src="js/validate.js"></script>
<script src="js/wow.js"></script>
<script src="js/script.js"></script>    
<script type="text/javascript" src="js/theme.js"></script>

<script src="js/timePicker.js"></script>
<script src="js/jquery-ui.js"></script>

<script src="js/validation.js"></script>


<!-- End of .page_wrapper -->

</body>
</html>
